<template>
  <div>
    <v-header :user="userInfo" :createdUser="createdUser"></v-header>
    <div class="add-student">
      <div class="add-info">
        <span class="space-left">学生信息</span>
        <span>/</span>
        <span>{{studentInfo.name}}</span>
        <span>/</span>
        <span>{{studentInfo.major==0?'理工':'文史'}}</span>
        <span>/</span>
        <span>{{studentInfo.score}}</span>
        <span>/</span>
        <span>{{studentInfo.precedence}}</span>
      </div>
    </div>
    <div class="plan-content">
      <div class="content">
        <div class="title">
          门道中学生生涯规划指导 高考志愿填报方案
        </div>
        <div class="student-info">
          <div class="info">学生姓名：<span>{{studentInfo.name}}</span></div>
          <div class="info">科类：<span>{{studentInfo.major==0?'理工':'文史'}}</span></div>
          <div class="info">分数：<span>{{studentInfo.score}}</span></div>
          <div class="info">位次：<span>{{studentInfo.precedence}}</span></div>
        </div>
        <table class="table table-bordered plan-table">
          <thead>
            <tr>
              <th class="volunteer">  </th>
              <th colspan=2 class="school-name">院校代码 | 院校名称</th>
              <th colspan=2 class="school-name">专业代码 | 专业名称</th>
              <th class="is-adjust">是否服从调剂</th>
            </tr>
          </thead>
          <tbody v-for="(item, index) in planInfo">
            <tr>
              <th scope="row" :rowspan="item.majorList.length" class="text-center">{{item.schemeNum==7?'备选':('志愿'+item.schemeName)}}</th>
              <td :rowspan="item.majorList.length" style="width: 10%;">{{item.schoolCode}}</td>
              <td :rowspan="item.majorList.length" style="width: 15%;">{{item.schoolName}}</td>
              <td style="padding: 0;width: 8%;">
                <p class="major-separated" v-for="(majorItem, majorIndex) in item.majorList">{{'专业' + (majorItem.majorNum==7?'备选':majorItem.majorNum)}}</p>
              </td>
              <td style="padding: 0;">
                <p class="major-separated" v-for="(majorItem, majorIndex) in item.majorList">{{(majorItem.majorCode + ' | ' + majorItem.majorName)}}</p>
              </td>
              <td :rowspan="item.majorList.length" class="text-center">
                <div class="form-inline">
                  <div class="form-group">
                    <label>是否服从调剂</label><br>
                    <div class="radio">
                      <label class="radio-inline">
                        是 <input type="radio" :name="index" value="1" v-model="item.schemeChange">
                      </label>
                      <label class="radio-inline">
                        否 <input type="radio" :name="index" value="0" v-model="item.schemeChange">
                      </label>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 右侧悬浮 -->
      <div class="right-operate">
        <div class="modify" @click="editPlan()">修改</div>
        <div class="confirm" @click="obedienceAdjustment()">确认</div>
        <!--<div class="download" @click="downPlan()">-->
        <div class="download" >
          <a :href="downUrl">下载</a>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import header from '../header/header.vue';
  import footer from '../footer/footer.vue';

  export default {
    name: 'studentPlan',
    components: {
      'v-header': header,
      'v-footer': footer
    },
    data() {
      return {
        userInfo: '',
        createdUser: '',
        stuNo: '',
        planInfo: [],
        studentInfo: {
          name: '',                //类型：String  可有字段  备注：姓名
          major: '',                //类型：Number  可有字段  备注：科类0:理科1:文科
          score: '',                //类型：Number  可有字段  备注：分数
          precedence: '',                //类型：Number  可有字段  备注：位次
        },
        downUrl: ''
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      // 获取url中的参数
      fetchData() {
        let username = this.$utils.getUrlKey('username');
        this.userInfo = username;
        this.createdUser = this.$utils.getUrlKey('createdUser');
        this.stuNo = this.$utils.getUrlKey('stuNo');
        this.getPlan();
        this.getStudentDetail();
        this.downUrl = this.HOST + 'mendao/downloadPdf?stuNo=' + this.stuNo;
      },
      // 获取已制定的方案
      getPlan() {
        let self = this;
        let params = new URLSearchParams();
        params.append('stuNo', self.stuNo);
        this.$http.post(this.HOST + 'mendao/getStuScheme', params).then(function (response) {
          if (response.data.code == 1) {
            self.planInfo = response.data.list;
          } else {
            console.log('获取已制定的方案数据请求失败');
          }
        })
          .catch(function (error) {
            console.log(error);
          });
      },
      /**
       * 获取学生档案详情
       */
      getStudentDetail() {
        let self = this;
        let params = new URLSearchParams();
        params.append('userId', self.createdUser);
        params.append('stuNo', self.stuNo);
        self.$http.post(this.HOST + 'mendao/getStuByStuNo', params).then((response) => {
          if (response.data.code == 1) {
            let info = response.data.data;
            self.studentInfo = {
              name: info.name,
              major: info.major,
              score: info.score,
              precedence: info.precedence,
            };
          };
        }, (response) => {
          console.log('数据请求失败');
        });
      },
      // 是否服从专业调剂
      obedienceAdjustment() {
        let self = this;
        let params = [];
        for(let i=0;i<self.planInfo.length;i++){
          var tempObj = {
            "id": self.planInfo[i].id,
            "schemeChange": self.planInfo[i].schemeChange
          };
          params.push(tempObj);
        }
        let paramsAll = new URLSearchParams();
        paramsAll.append('data', JSON.stringify(params));
        this.$http.post(this.HOST + 'mendao/updateSchemeChange', paramsAll).then(function (response) {
          if (response.data.code == 1) {
            console.log('服从调剂数据请求成功');

          } else {
            console.log('服从调剂数据请求失败');
          }
        })
          .catch(function (error) {
            console.log(error);
          });
      },
      // 修改方案
      editPlan() {
        this.$router.push({
          path: '/planSelection', query: {
            username: this.userInfo,
            createdUser: this.createdUser,
            stuNo: this.stuNo
          }
        });
      },
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .add-student
    position: fixed;
    width: 100%;
    height: 37px;
    top: 45px;
    background-color: #fff;
    color: #E65A1E;
    border-bottom: 1px solid #bbbbbb;
    z-index: 2;
    .add-info
      width: 1190px;
      margin: 0 auto;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
    space-left
      margin-left: 63px;

  .plan-content
    position: relative
    width: 1200px
    margin: 0 auto
    min-height: 100vh
    padding-top: 90px
    .content
      position: relative
      width: 1000px
      margin: 0 auto
      .title
        width: 100%
        height: 50px
        line-height: 50px
        font-size: 18px
        font-weight: 600
        color: #E65A1E
        background: #DEDEDE
        border: 1px solid rgba(187, 187, 187, 1)
        text-align: center
      .student-info
        display: table
        width: 100%
        height: 38px
        padding: 0 100px
        line-height: 38px
        font-size: 16px
        color: #101010
        background: #DEDEDE
        border: 1px solid rgba(187, 187, 187, 1)
        text-align: center
        .info
          display: table-cell
          font-weight: 600
      .plan-table
        tbody>tr>th, tbody>tr>td
          vertical-align: middle
        .school-name
          width: 38%
        .volunteer
          width: 8%
          text-align: center
        .is-adjust
          width: 16%
          text-align: center
        .major-separated
          border-bottom: 1px solid #ddd
          padding: 8px
          margin-bottom: 0
          min-height: 60px
        .major-separated:last-child
          border-bottom: 0

    .right-operate
      position: fixed
      right: 50px
      top: 50%
      margin-top: -125px
      width: 70px
      height: 250px
      div
        width: 70px;
        height: 70px;
        line-height: 70px;
        border-radius: 100px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        box-shadow: 0px 0px 8px 0px rgba(170, 170, 170, 1);
      .modify
        cursor: pointer
        background-color: rgba(0, 150, 136, 1);
      .confirm
        cursor: pointer
        margin-top: 20px
        background-color: rgba(237, 108, 36, 1)
      .download
        cursor: pointer
        margin-top: 20px
        background-color: rgba(37, 155, 36, 1);
        a
          text-decoration: none !important
          color: #fff
        a:hover
          text-decoration: none !important
          color: #fff
</style>
